<template>
  <div>
    <el-row>
      <el-col :span="12" v-for="item in listData">
        <el-card class="box-card" style="position: relative;margin: 0px 5px; " >
          <div slot="header" class="clearfix">
            <span>{{item.roomName}}</span>
          </div>
          <cornermark :bgcolor="dict.listClass.owner_type_cd[item.ownerType]" position="right">{{dict.label.owner_type_cd[item.ownerType]}}</cornermark>
          <el-descriptions :column="2" size="mini">
            <el-descriptions-item label="使用面积">{{item.roomArea}}</el-descriptions-item>
            <el-descriptions-item label="建筑面积">{{item.buildArea}}</el-descriptions-item>
            <el-descriptions-item label="入伙时间">{{item.joinTime}}</el-descriptions-item>
            <el-descriptions-item label="房屋属性">{{dict.label.floor_state[item.roomFunction]}}</el-descriptions-item>
            <el-descriptions-item label="住所户型">{{dict.label.apartment[item.apartment]}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { roomCustomList } from "@/api/waitress/customInfo";
  import Cornermark from '@/components/custom/cornerMark/index.vue';
  export default {
    name: "roomInfo",
    components:{ Cornermark },
    dicts:[ 'floor_state','apartment','owner_type_cd'],
    data() {
      return {
        listData:[]
      }
    },
    watch:{
      customForm(){
        this.initForm()
      }
    },
    created(){
      this.initForm
    },
    methods:{
      initForm(){
        roomCustomList({customId:this.customForm.customId||-1}).then(res=>{
          this.listData = res.data
        })
      }
    },
    props: {
      customForm: {
        type: Object,
        default: () => {
        }
      },
    }
  }
</script>

<style scoped>

</style>
